<template>
    <div class="log-controller-box">
        <div class="log-head">
          <span style="font-size: 40px">
                        <i class="el-icon-notebook-2" ></i>
                        日志管理
           </span>
        </div>

        <div class="log-body flex-center-col">
            <el-divider style="width: 70%"></el-divider>
            <table class="log-table">
                <tr >
                    <td>日志名称</td>
                    <td><i class="el-icon-tickets"></i>
                        日志内容</td>
                    <td>
                        <i class="el-icon-time"></i>
                        创建时间
                    </td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,index) in obj.log.list" :style="{backgroundColor: index%2===0?' #e7e7e7':''}">
                    <td style="width: 200px">{{item.lTitle}}</td>
                    <td style="width: 400px">
                        {{item.lContent}}
                    </td>

                    <td >
                        <i class="el-icon-time"></i>
                        {{item.lCreateTime}}
                    </td>
                    <td>

                        <el-dropdown trigger="click">
                                  <span class="menu-dropdown-link">
                                      <i class="el-icon-setting"></i>
                                    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                                  </span>
                            <template #dropdown>
                                <el-dropdown-menu divided="true">
                                    <el-dropdown-item icon="el-icon-edit" @click="editLog(item)">编辑</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-remove" @click="deleteLog(item.lId,index)">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>



                    </td>
                </tr>

                <!--                    此处作用:保证一个表格有pageSize行，当列表大小<pageSize时,不至于size平分整个table-->
                <!--                    填充剩余行-->
                <tr v-for="i in (obj.log.pageSize- obj.log.size)"></tr>


            </table>

        </div>
        <div class="log-foot flex-center-col">
            <!--            底部页面控制-->


            <el-divider style="width: 70%"></el-divider>
            <el-pagination
                    background
                    layout="total, prev, pager, next, jumper"
                    :page-size="obj.page.pageSize"
                    :total="obj.page.total"
                    :current-page="obj.page.currentPage"
                    @current-change="pageChange"
            >

            </el-pagination>

        </div>
    </div>
</template>

<script>
    import InsertLog from "@/components/bc/InsertLog";
    import {reactive} from "@vue/reactivity";
    import {onMounted} from "@vue/runtime-core";
    import axios from 'axios'
    import service from "@/assets/js/service";
    import {errorMessage, rejectMessage, successMessage} from "@/assets/js/utils";
    export default {
        name: "LogController",

        setup(){

            let obj=reactive({
                log:{},
                page:{
                    pageSize:0,
                    currentPage:1,
                    total:0

                }
            })

            function pageChange() {

            }



            function editLog(item){

            }
            function deleteLog(id,index){
                const choose=confirm("确定删除？")
                if(choose){
                    service.deleteLog(id).then(resp=>{
                        if(resp.data.code===200){
                            obj.log.list.splice(index,1)
                            successMessage("删除成功")

                        }else{
                            if(rejectMessage(resp)){

                            }else {
                                errorMessage("删除失败:"+resp.data.msg)
                            }
                        }
                    })
                }

            }

            function getAxiosLog(pageNum){

                return axios.get("/api/log?pageNum="+pageNum).then(resp=>resp.data)
            }
            function setLog(data) {

                if(data.code===200){
                    obj.log=data.data
                    obj.page.pageSize=data.data.pageSize
                    obj.page.total=data.data.total
                }
            }

            onMounted(async ()=>{
                const data = await getAxiosLog(obj.page.currentPage)
                setLog(data)
            })

            return{
                obj,
                pageChange,
                editLog,
                deleteLog
            }
        }
    }
</script>

<style scoped lang="less">

    .log-controller-box{
        width: 100%;
        height: 100%;
        background-color: white;
        .log-head{
            width: 100%;
            height: 10%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        .log-body{
            width: 100%;
            height: 80%;
            .log-table{
                width: 90%;
                height: 80%;

            }
            .log-foot{
                height: 20%;
                width: 100%;
            }
        }

    }


    .menu-dropdown-link{
        color: #028090;
        cursor: pointer;


    }
    .menu-dropdown-link:hover{

    }
</style>